<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>看板</title>
    <script type="text/javascript" src="../static/jquery-3.3.1.js"></script>
</head>
<style type="text/css">
    .msg_board {
        width: 1200px;
        height: 500px;
        border: solid 1px darkcyan;
        padding: 5px;
        overflow-y: scroll;
    / / 文字长度大于div宽度时换行显示 word-break: break-all;
    }

    /*set srcoll start*/
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #D6F2FD;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        /*border-radius: 5px;*/
        background-color: #D6F2FD;
    }

    ::-webkit-scrollbar-thumb {
        height: 20px;
        /*border-radius: 10px;*/
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #89D7F7;
    }

    .div-inline {
        display: inline
    }
</style>
<!--页面加载时即启动websocket服务器-->
<!--<body onload="initWebSocket()">-->
<body onload="init();init_web()">
<p>Hello, <span id="user" th:text="${userName}"></span>!</p>
<div id="board" class="msg_board">
</div>
<input type="button" value="测试专用" onclick="test()"/>
<a th:href="@{'http://localhost:8002/board'}" th:style="'text-decoration:none;'"><input type="button" value="返回看板列表"></a>

</body>
<script th:inline="javascript">
    var webSocket;
    var boardId = [[${boardId}]].toString();
    var userId = [[${userId}]];
    var lane_ids = [];
    var is_init = false;
    var json_result = [[${json_result}]];

    function test() {
        alert(boardId);
    }

    function init_web() {
        //测试json字符串
        //var str = "{\"lanes\":[{\"panels\":[{\"panel\":{\"createdDate\":1547902072000,\"description\":\"adfdsaf\",\"id\":1,\"laneId\":1,\"panelName\":\"1p\"},\"cards\":[{\"card\":{\"cardContent\":\"d\",\"cardName\":\"1p-1c\",\"createdDate\":1547902072000,\"description\":\"dfas\",\"id\":1,\"lastChanger\":1,\"panelId\":1},\"members\":[{\"member\":{\"id\":2,\"name\":\"testt\",\"password\":\"23432\",\"salt\":\"234312333\",\"status\":0}},{\"member\":{\"headUrl\":\"http://images.nowcoder.com/head/1t.png\",\"id\":1,\"name\":\"test\",\"password\":\"23432\",\"salt\":\"234312333\",\"status\":0}}]},{\"card\":{\"cardContent\":\"asdf\",\"cardName\":\"1p-2c\",\"createdDate\":1547902072000,\"description\":\"dfas\",\"id\":2,\"lastChanger\":1,\"panelId\":1},\"members\":[]},{\"card\":{\"cardContent\":\"ddd\",\"cardName\":\"1p-3c\",\"createdDate\":1547902072000,\"description\":\"dfas\",\"id\":3,\"lastChanger\":1,\"panelId\":1},\"members\":[]}]},{\"panel\":{\"createdDate\":1547902072000,\"description\":\"adfdsaf\",\"id\":2,\"laneId\":1,\"panelName\":\"2p\"},\"cards\":[{\"card\":{\"cardContent\":\"d\",\"cardName\":\"2p-1c\",\"createdDate\":1547902072000,\"description\":\"dfas\",\"id\":4,\"lastChanger\":1,\"panelId\":2},\"members\":[]},{\"card\":{\"cardContent\":\"d\",\"cardName\":\"2p-2c\",\"createdDate\":1547902072000,\"description\":\"dfas\",\"id\":5,\"lastChanger\":1,\"panelId\":2},\"members\":[]},{\"card\":{\"cardContent\":\"d\",\"cardName\":\"2p-3c\",\"createdDate\":1547902072000,\"description\":\"dfas\",\"id\":6,\"lastChanger\":1,\"panelId\":2},\"members\":[]}]}],\"lane\":{\"boardId\":1,\"createdDate\":1547902072000,\"description\":\"asdffa\",\"id\":1,\"laneName\":\"qwe\"}},{\"panels\":[],\"lane\":{\"boardId\":1,\"createdDate\":1547902072000,\"description\":\"asdffa\",\"id\":2,\"laneName\":\"空\"}}]}";
                //转换成json对象(实际是lanes字段)进行操作
        if(json_result != null){
            var json_obj = eval('(' + json_result + ')');
            var lanes = json_obj.lanes;
            for (var i = 0; i < lanes.length; i++) {
                var panels = lanes[i].panels;
                var lane = lanes[i].lane;
                add_lane_basic(lane.id, lane.boardId, lane.createdDate, lane.description, lane.laneName);
                //对panels进行遍历
                for (var j = 0; j < panels.length; j++) {
                    var panel = panels[j].panel;
                    //  panel格式
                    // "createdDate" "description" "id" "laneId" "panelName"
                    //对cards进行遍历
                    var cards = panels[j].cards;
                    for (var k = 0; k < cards.length; k++) {
                        var card = cards[k].card;
                        //  card格式
                        // "cardContent" "cardName" "createdDate" "description" "id" "lastChanger" "panelId"
                        var members = cards[k].members;
                        add_card_basic(lane.id + "_" + j.toString(), card.cardContent, card.id, card.cardName,
                            card.createdDate, card.description, card.lastChanger);
                        //对members进行遍历
                        for (var p = 0; p < members.length; p++) {
                            var member = members[p].member;
                            // member格式
                            // "id" "name" "password" "salt" "status"
                        }
                    }
                }
            }
            initWebSocket();
            //标识已初始化
            is_init = true;
        }
    }

    function init() {
        var div = document.getElementById("board");
        var button = document.createElement("input");
        var text = document.createElement("input");
        text.setAttribute("id", "add_lane_test");
        text.setAttribute("type", "text");
        text.setAttribute("style", "margin-right:5px");
        div.appendChild(text);
        button.setAttribute("id", "add_lane_button");
        button.setAttribute("type", "button");
        button.setAttribute("value", "增加泳道");
        button.onclick = function(){
            add_lane(boardId);
        };
        div.appendChild(button);
    }

    //增加泳道时调用的方法
    function add_lane(b) {
        var row = {};
        row.action = "add_lane";
        row.user_id = "user_id"+userId;
        row.board_id = "board_id"+b;
        row.createdDate = new Date().getTime();
        row.description = "";

        add_lane_basic(4, b, "", "", "");
        webSocket.send(row);
    }

    //增加泳道基础操作封装，自动添加四个panel（模仿leangoo）
    function add_lane_basic(id, b, c, d, l) {
        var div = document.getElementById("board");
        var label = document.createElement("label");
        var div_label = document.createElement("div");
        //获取增加泳道按钮
        var add_lane_button = document.getElementById("add_lane_button");
        //创建删除泳道按钮
        var delete_lane_button = document.createElement("input");

        delete_lane_button.setAttribute("type", "button");
        delete_lane_button.setAttribute("id", "delete_lane" + id);
        delete_lane_button.setAttribute("value", "删除泳道");
        delete_lane_button.setAttribute("style", "margin-left:5px");
        delete_lane_button.onclick = function () {
            delete_lane(id);
        };
        lane_ids.push(id);
        label.innerText = "lane_id:" + id;

        //测试，显示泳道 id
        div_label.appendChild(label);
        div_label.appendChild(delete_lane_button);
        div_label.appendChild(document.createElement("br"));

        //用display=none的span标签保存暂时不用的信息
        //boardId为int，其余为string
        div_label.appendChild(create_none_display(id, "boardId", b));
        div_label.appendChild(create_none_display(id, "createdDate", c));
        div_label.appendChild(create_none_display(id, "description", d));
        div_label.appendChild(create_none_display(id, "laneName", l));

        for (var i = 0; i <= 3; i++) {
            var panel = document.createElement("div");
            //测试，根据lane_id形成panel_id，后面从json中获取
            //闭包问题，用临时变量保存
            let new_id = id + "_" + i.toString();

            //并列显示div,且起始高度一致
            panel.setAttribute("id", new_id);
            panel.style.display = "inline-block";
            panel.style.marginRight = "10px";
            panel.style.marginTop = "5px";
            panel.style.overflow = "auto";
            var t = document.createElement("input");
            t.setAttribute("id", new_id + "_input");

            //隐藏的标签来保存card数量，方便增加卡片
            var nums = document.createElement("span");
            nums.innerText = "0";
            nums.style.display = "none";

            var button = document.createElement("input");
            button.setAttribute("type", "button");
            button.setAttribute("value", "增加卡片");
            button.setAttribute("style", "margin-right:15px");

            //增加卡片，参数为panel id
            button.onclick = function () {
                add_card(new_id, document.getElementById(new_id + "_input").value, null);
            };
            panel.appendChild(button);
            panel.appendChild(document.createElement("br"));
            panel.appendChild(t);
            panel.appendChild(nums);
            div_label.appendChild(panel);
        }
        div_label.setAttribute("id", id);
        div_label.appendChild(document.createElement("br"));
        div_label.appendChild(document.createElement("br"));
        div.appendChild(div_label);
        div.removeChild(add_lane_button);
        div.removeChild(document.getElementById("add_lane_test"));
        init();
    }

    function delete_lane(id) {
        var row = {};
        row.lane_id = "l_"+id;

        delete_lane_basic(id);
        webSocket.send(row);
    }

    function delete_lane_basic(id) {
        //测试，删除对应id泳道
        //alert(id);
        var board = document.getElementById("board");
        board.removeChild(document.getElementById(id));
        board.removeChild(board.getElementsByTagName("br")[0]);
        board.removeChild(board.getElementsByTagName("br")[0]);
        var index = lane_ids.indexOf(id);
        lane_ids.splice(index, 1);
    }

    function add_card(id, c) {
        var row = {};
        row.action = "add_card";
        row.board_id = "b_" + boardId;
        row.user_id = "u_" + userId;
        row.panel_id = id.split("_")[1];
        row.content = c;
        row.description = "";

        add_card_basic(id, c, null, "", "", "", "");
        webSocket.send(JSON.stringify(row));
    }

    //增加卡片的基础操作
    function add_card_basic(id, content, card_id, cardName, createdDate, description, lastChanger) {
        //测试，增加对应panel_id的卡片
        //获取panel
        var parent = document.getElementById(id);
        var card = document.createElement("input");
        var nums = parent.getElementsByTagName("span")[0];
        var t = document.createElement("input");

        parent.removeChild(document.getElementById(parent.id + "_input"));
        parent.removeChild(parent.getElementsByTagName("br")[parseInt(nums.innerText)]);
        nums.innerText = (parseInt(nums.innerText) + 1).toString();
        parent.appendChild(document.createElement("br"));
        if (card_id != null)
            card.setAttribute("id", id + "_" + card_id);
        else
            card.setAttribute("id", id + "_" + nums.innerText);
        if (content != null)
            card.setAttribute("value", content);
        else
            card.setAttribute("value", "");
        card.setAttribute("style", "");
        t.setAttribute("id", parent.id + "_input");

        //用display=none的span标签保存暂时不用的信息
        // "cardName" "createdDate" "description" "lastChanger"
        parent.appendChild(create_none_display(id, "cardName", cardName));
        parent.appendChild(create_none_display(id, "createdDate", createdDate));
        parent.appendChild(create_none_display(id, "description", description));
        parent.appendChild(create_none_display(id, "lastChanger", lastChanger));

        parent.appendChild(card);
        parent.appendChild(document.createElement("br"));
        parent.appendChild(t);
    }

    //按钮待定
    function update_card(id, content) {
        var row = {};
        row.card_id = "c_";
        row.user_id = "u_";
        row.panel_id = "p_";
        row.content = content;
        row.description = "";

        update_card_basic(id, content);
        webSocket.send(row);
    }

    function update_card_basic(id, content) {
        //获取card对象
        var card = document.getElementById(id);
        card.value = content;
    }

    function delete_card(id) {
        var row = {};
        row.card_id = "";

        delete_card_basic(id);
        webSocket.send(row);
    }

    function delete_card_basic(id) {
        var card = document.getElementById(id);
        var parent = card.parentElement;
        parent.removeChild(card);
    }

    function closeWs() {
        webSocket.close();
    };

    function initWebSocket() {
        if ("WebSocket" in window) {
            if (webSocket == null) {
                var url = "ws://localhost:12345/wstest";
                // 打开一个 web socket
                webSocket = new WebSocket(url);
            } else {
                alert("您已进入看板...");
            }

            webSocket.onopen = function () {
                alert("已进入看板...");
            };

            webSocket.onmessage = function (evt) {
                //var msg_board = document.getElementsByClassName("msg_board")[0];
                var received_msg = evt.data;
                var origin_data = eval("(" + received_msg + ")");
                if(origin_data.msg != null){
                    alert(origin_data.msg + "," + origin_data.detail);
                }
                else{
                    //判断是什么具体操作
                    var action = origin_data.action;
                    var rec;
                    switch (action) {
                        //card "createdDate" "description" "id" "laneId" "panelName"
                        case "add_card":
                            //add_card_basic(lane.id + "_" + j.toString(), card.cardContent, card.id, card.cardName,
                                //card.createdDate, card.description, card.lastChanger);
                            rec = origin_data.card;
                            alert(rec.cardContent);
                            add_card_basic(origin_data.laneId+"_"+rec.panelId, rec.cardContent, rec.id, rec.cardName,
                                            rec.createdDate, rec.description, rec.lastChanger);
                            break;
                        case "update_card":
                            update_card_basic();
                            break;
                        case "delete_card":
                            delete_card_basic();
                            break;

                        //panel
                        // case "add_panel":add_panel();break;
                        // case "update_panel":update_panel();break;
                        // case "delete_panel":delete_panel();break;

                        //lane
                        case "add_lane":
                            //add_lane_basic(lane.id, lane.boardId, lane.createdDate, lane.description, lane.laneName);
                            //add_lane_basic(rec.id, rec.boardId, rec.createdDate, rec.description, rec.laneName);
                            break;
                        case "delete_lane":
                            delete_lane_basic();
                            break;

                        default:
                            alert("无效操作!");
                    }
                }
            };

            webSocket.onclose = function () {
                // 关闭websocket
                alert("连接已关闭...");
                webSocket = null;
            };
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }

    //创建display=none的span标签 保存必要信息
    function create_none_display(id, name, content) {
        var n = document.createElement("span");
        n.setAttribute("id", id + "_" + name);
        n.innerText = content;
        n.style.display = "none";
        return n;
    }

    function wrap_jsoncode() {
        var json = [];
        var row = {};
        //测试待完善 字段名
        row.id = 1;
        json.push(row);
    }

</script>
</html>